import { IPlank } from '@/types';
import { xyz } from '@/utils';
import { groupBy, transform } from 'lodash-es';
import { Vector3 } from 'three';

export function HoleAndGrooveInfo(props: { plankData?: IPlank }) {
  const { plankData } = props;
  return (
    <>
      {transform(
        groupBy(plankData?.holes, (hole) => {
          return `${hole.diameter} * ${hole.depth}`;
        }),
        (total, holes, name) => {
          total.push({ count: holes.length, name: name });
        },
        [] as { count: number; name: string }[],
      ).map((total) => {
        return (
          <div key={total.name}>
            {total.count}-Ф{total.name}
          </div>
        );
      })}
      {plankData?.grooves
        .map((groove) => {
          const { start, end, width, depth } = groove;
          if (!start) {
            return;
          }
          const length = new Vector3()
            .fromArray(xyz(start))
            .distanceTo(new Vector3().fromArray(xyz(end)));
          return `${length}*${width}*${depth}`;
        })
        .map((item) => {
          return <div key={item}>{item}</div>;
        })}
    </>
  );
}
